<template>
  <div>
    <el-dialog title="" :lock-scroll="false" :visible.sync="visible" :showClose="false"
       customClass="strategysuggestion" ref="clDialog" :closeOnClickModal="false" >
      <i class="closeBtn" @click="closeEvent" ></i>
      <img src="../assets/img/strategy/title.png" class="titleImg"/>
      <div class="strategysuggestion-view">
        <div class="sn-view-center">
          <p class="title" v-if="hasLive">
            <span>正在直播：{{coffee_info.title}}</span>
            <span>{{coffee_info.begin_time}}-{{coffee_info.end_time}}</span>
          </p>
          <p class="Notitle" v-else>
            <span>当前暂无直播</span>
          </p>
          <div class="higherUp clearfix" v-if="hasLive">
            <img src="../assets/img/strategy/title.png"/>
            <p>
              <span>主讲牛人：{{coffee_info.name}}</span>
              <span>{{coffee_info.remark}}</span>
            </p>
          </div>
        </div>
        <div class="infoContent">
          <p><span>1</span>一家人人都可提供交易技术分享的平台</p>
          <p><span>2</span>一家人人都可随时随地学习的平台</p>
          <p><span>3</span>一家人人都可知识变现且有情怀的平台</p>
        </div>
        <div class="loginBox">
          <div>
            <a href="javascript:;" class="registerBtn">我要入驻</a>
            <a href="http://www.xilongfx.com/zsdl/" class="loginBtn">我要加盟</a>
          </div>
          <span class="countdown"><i>{{countdown}}</i> 秒后关闭</span>
        </div>
      </div>
    </el-dialog>
    <v-login ref="login"/>
  </div>
</template>

<script>
  import login from './login/login.vue'
  import ImgLibrary from "./ImgLibrary";

  export default {
    components: {
      ImgLibrary,
      'v-login': login
    },
    name: 'strategy-suggestion',
    data () {
      return {
        visible: false,
        countdown: 10,
        coffee_info: '',
        hasLive: false,
      }
    },
    created () {

    },
    mounted () {
      let setTime = setInterval(() => {
        this.countdown--
        if (this.countdown == 0) {
          clearInterval(setTime)
          if (this.visible) {
            this.closeEvent()
          }
        }
      },1000)
    },
    methods: {
      getStrateg () {
        this.$http.post('/index/beta_api/getFramData').then((data) => {
          if (data.code) {
            this.hasLive = data.data.course.is_have
            this.coffee_info = data.data.course.data
          }
        })
      },
      closeEvent() {
        this.$refs.clDialog.$el.childNodes[0].className='el-dialog el-dialog--small strategysuggestion onAnimation'
        setTimeout(()=> {
          this.visible = false
        },500)
      }
    }
  }
</script>

<style lang="scss">
  .strategysuggestion {
    &.onAnimation {
      animation: animtes 0.5s linear forwards;
    }
    .closeBtn {
      width: 40px;
      height: 40px;
      content: '';
      display: block;
      transition: background .2s linear;
      background: url("../assets/img/strategy/close_icon.png");
      position: absolute;
      cursor: pointer;
      top: -54px;
      right: -46px;
      &:hover {
        background: url("../assets/img/strategy/close_hover_icon.png");
      }
    }
    width: 660px;
    background-color: #ffffff;
    border-radius: 6px;
    top: 25%!important;
    background: url("../assets/img/strategy/b_bg.png") no-repeat center bottom;
    background-size: cover;
    .el-dialog__header {
      text-align: center;
      padding-top: 16px;
    }
    .el-dialog__body {
      padding: 30px 0px 18px;
    }
    .titleImg {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -115px;
    }
    .strategysuggestion-view {
      .sn-view-center {
        text-align: center;
        padding: 0 25px;
        .Notitle {
          text-align: center;
          font-size: 16px;
          color: #de4414;
          span {
            position: relative;
            padding-left: 31px;
            &:before {
              content: '';
              width: 21px;
              height: 18px;
              position: absolute;
              background: url("../assets/img/strategy/lock_play_icon.png");
              top: 1px;
              left: 0;
            }
          }
        }
        .title {
          text-align: center;
          font-size: 16px;
          color: #0962a7;
          span:first-child {
            margin-right: 40px;
            padding-left: 22px;
            position: relative;
            &:before {
              content: '';
              width: 14px;
              height: 14px;
              position: absolute;
              background: url("../assets/img/strategy/write.gif");
              top: 2px;
              left: 0;
            }
          }
          span:last-child {
            padding-left: 27px;
            position: relative;
            &:before {
              content: '';
              width: 17px;
              height: 16px;
              position: absolute;
              background: url("../assets/img/strategy/time_icon.png");
              top: 0px;
              left: 0;
            }
          }
        }
        .higherUp {
          margin-top: 16px;
          img {
            width: 68px;
            height: 68px;
            border: solid 1px #1968b1;
            border-radius: 50%;
            float: left;
            margin: 4px 22px 0 15px;
          }
          p {
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            span {
              display: block;
              font-size: 14px;
              &:first-child {
                color: #1968b1;
                margin-bottom: 4px;
              }
              &:last-child {
                color: #333333;
                line-height: 20px;
              }
            }
          }
        }
      }
      .infoContent {
        margin-top: 18px;
        padding-left: 176px;
        margin-bottom: 34px;
        p {
          font-size: 16px;
          color: #187ccb;
          margin-bottom: 12px;
          &:last-child {
            margin-bottom: 0;
          }
          span {
            color: #fff;
            display: inline-block;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #2989d4;
            line-height: 25px;
            text-align: center;
            margin-right: 16px;
          }
        }
      }
      .loginBox {
        text-align: center;
        padding: 0 25px;
        position: relative;
        height: 35px;
        width: 100%;
        a {
          display: inline-block;
          width: 130px;
          height: 35px;
          border-radius: 3px;
          line-height: 35px;
          transition: all .2s linear;
          font-size: 16px;
        }
        .registerBtn {
          border: solid 1px #3c92e8;
          color: #3c92e8;
          margin-right: 65px;
          &:hover {
            background: #3c92e8;
            color: #fff;
          }
        }
        .loginBtn {
          background-color: #3c92e8;
          border: solid 1px #3c92e8;
          color: #fff;
          &:hover {
            background: #2889d4;
            border: solid 1px #2889d4;
          }
        }
        .countdown {
          font-size: 12px;
          color: #999999;
          position: absolute;
          right: 25px;
          top: 4px;
          i {
            font-size: 14px;
            color: #de4414;
          }
        }
      }
    }
  }
  @keyframes animtes {
    0% {
      opacity: 1;
      top: 25%;
      transform: scale(1) translateX(50%);
      left: auto;
      right: 50%;
    }
    100% {
      opacity: 0;
      top: 40px;
      left: auto;
      transform: scale(0.3) translateX(50%);
      right: -20px;
    }
  }
  @-webkit-keyframes animtes {
    0% {
      opacity: 1;
      top: 25%;
      transform: scale(1) translateX(50%);
      left: auto;
      right: 50%;
    }
    100% {
      opacity: 0;
      top: 40px;
      left: auto;
      transform: scale(0.3) translateX(50%);
      right: -20px;
    }
  }
</style>
